import React from "react";
import { champion } from "../../../../../API/getMatchDetail.ts";
import style from "./PlayerItem.module.scss";
import { Player } from "../../../../../API/getMatchInfo.ts";
import { getOtherSummer } from "../../../../../API/getOtherSummer.ts";
import { useDispatch } from "react-redux";
interface Props {
  playerInfo: {
    champion: champion;
    player: Player;
  };
}
const PlayerItem: React.FC<Props> = (props: Props) => {
  const dispatch = useDispatch();

  const serachByName = () => {
    getOtherSummer(props.playerInfo.player.player.summonerName).then((r) => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      dispatch({ type: "SET_SEARCH_SUM_ID", payload: r.summonerId });
    });
  };
  return (
    <div className={style.PlayerItem}>
      <div className={style.championIcon}>
        <img alt="" src={props.playerInfo.champion.championIcon} />
        {/*召唤师名称*/}
        <div className={style.summonerName} onClick={serachByName}>
          {props.playerInfo.player.player.summonerName}
        </div>
        {/*符文*/}
        <div className={style.perk}>
          <img alt="" src={props.playerInfo.champion.perk0Icon} />
          <img alt="" src={props.playerInfo.champion.perk1Icon} />
        </div>
        {/*召唤师技能*/}
        <div className={style.spell}>
          <img alt="" src={props.playerInfo.champion.spell1Icon} />
          <img alt="" src={props.playerInfo.champion.spell2Icon} />
        </div>
        {/*装备*/}
        <div className={style.item}>
          {props.playerInfo.champion.itemIcons.map((item, index) => {
            if (item == "") {
              return <div className={style.itemnull} key={index}></div>;
            }
            return <img src={item} key={index} alt="" />;
          })}
        </div>
        {/*  KDA */}
        <div className={style.KDA}>{props.playerInfo.champion.KDA}</div>
        {/*小兵*/}
        <div className={style.totalMinionsKilled}>
          {props.playerInfo.champion.totalMinionsKilled}
        </div>
        {/*  经济*/}
        <div className={style.goldEarned}>
          {props.playerInfo.champion.totalGold}
        </div>
        {/*  伤害*/}
        <div className={style.totalDamageDealtToChampions}>
          {props.playerInfo.champion.totalDamageDealtToChampions}
        </div>
      </div>
    </div>
  );
};

export default PlayerItem;
